<template>
  <div class="home">
    <div class="banner">
      <div class="banxin">
        <img src="../assets/images/home/banner.png" alt="" />
      </div>
    </div>
    <Mytitle title1="精品推荐" :titleimg="titlemsg1"></Mytitle>
    <List :arr="myArr"></List>
    <Mytitle title1="热门兑换" :titleimg="titlemsg2"></Mytitle>
    <img src="../assets/images/home/ad.png" class="banxin" alt="" style="margin-bottom: 20px; display: block" />
    <List :arr="myHot"></List>

    <Mytitle title1="积分攻略" :titleimg="titlemsg3"></Mytitle>

    <ul class="banxin jifen">
      <!-- 设置的是背景图必须设置宽高才会显示，不会撑起盒子 -->
      <li :style="{ backgroundImage: `url(${jifen1})` }">
        <h4>签到得鸡腿</h4>
        <div>去签到</div>
      </li>
      <li :style="{ backgroundImage: `url(${jifen2})` }">
        <h4>购课得鸡腿</h4>
        <div>去购课</div>
      </li>
      <li :style="{ backgroundImage: `url(${jifen3})` }">
        <h4>推荐得鸡腿</h4>
        <div>去推荐</div>
      </li>
      <li :style="{ backgroundImage: `url(${jifen4})` }">
        <h4>做任务得鸡腿</h4>
        <div>做任务</div>
      </li>
    </ul>
  </div>
</template>

<script>
import Mytitle from '../components/home/Mytitle.vue'
import List from '../components/home/List.vue'
//按需引入请求

import { JingpinApi, HotApi } from '../request/api.js'

export default {
  name: 'Home',
  data() {
    return {
      jifen1: require('../assets/images/home/integral-01.png'),
      jifen2: require('../assets/images/home/integral-02.png'),
      jifen3: require('../assets/images/home/integral-03.png'),
      jifen4: require('../assets/images/home/integral-04.png'),
      titlemsg1: require('../assets/images/home/Recommend.png'),
      titlemsg2: require('../assets/images/home/hot.png'),
      titlemsg3: require('../assets/images/home/integral.png'),
      myArr: [],
      myHot: [],
    }
  },
  components: {
    Mytitle,
    List,
  },
  created() {
    //jingpinapi()是方法要加括号
    JingpinApi().then((res) => {
      console.log(res)
      if (res.code === 0) {
        this.myArr = res.data.data.records
      }
    })
    HotApi().then((res) => {
      if (res.code === 0) {
        console.log(res.data.data.records)
        this.myHot = res.data.data.records
        this.myHot.pop()
        this.myHot.pop()
      }
    })
  },
}
</script>
<style lang="less" scoped>
@import '../totao.css';
.home {
  background: #f5f5f5;
  .banner {
    background: #fff;
    .banxin {
      padding-bottom: 30px;
    }
  }
  .jifen {
    display: flex;
    justify-content: space-between;
    padding-bottom: 47px;
    li {
      width: 285px;
      height: 168px;
      color: #fff;
      //使用padding 把盒子中的内容挤到中间部分
      //padding撑大盒子，使用c3盒子模型缩小
      padding-top: 43px;
      padding-left: 29px;
      box-sizing: border-box;
      cursor: pointer;
      //设置高度宽度，0.5秒内匀速变为110%
      background-size: 100% 100%;
      transition: background-size .5s linear;
      &:hover{
        background-size: 110% 110%;
      } 
      h4 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 19px;
      }
      div {
        width: 96px;
        height: 27px;
        border: 1px solid #fff;
        text-align: center;
        line-height: 27px;
      }
    }
  }
}
</style>
